<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>财务分析报告</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .chart-container {
            width: 100%;
            height: 400px;
            margin: 20px 0;
        }
        .summary-card {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .summary-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        .summary-item:last-child {
            border-bottom: none;
        }
        .summary-label {
            font-weight: bold;
            color: #555;
        }
        .summary-value {
            color: #007bff;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📊 财务分析报告</h1>
        
        <div class="summary-card">
            <h2>总体财务情况</h2>
            <div class="summary-item">
                <span class="summary-label">销售额:</span>
                <span class="summary-value" id="sales">¥0.00</span>
            </div>
            <div class="summary-item">
                <span class="summary-label">支出:</span>
                <span class="summary-value" id="expenses">¥0.00</span>
            </div>
            <div class="summary-item">
                <span class="summary-label">欠款:</span>
                <span class="summary-value" id="debt">¥0.00</span>
            </div>
            <div class="summary-item">
                <span class="summary-label">未回款:</span>
                <span class="summary-value" id="noReturn">¥0.00</span>
            </div>
            <div class="summary-item">
                <span class="summary-label">账户总余额:</span>
                <span class="summary-value" id="totalBalance">¥0.00</span>
            </div>
        </div>
        
        <div id="summaryChart" class="chart-container"></div>
        <div id="monthlyChart" class="chart-container"></div>
    </div>

    <script>
        // 模拟财务数据
        const financialData = {
            totalAnalyse: {
                sales: 1250000,
                expenses: 850000,
                debt: 250000,
                noReturn: 150000,
                totalBalance: 400000
            },
            monthData: [
                ["product", "销售额", "支出", "收入"],
                ["2023/01", 120000, 80000, 100000],
                ["2023/02", 150000, 90000, 130000],
                ["2023/03", 180000, 110000, 160000],
                ["2023/04", 140000, 85000, 120000],
                ["2023/05", 160000, 95000, 140000],
                ["2023/06", 200000, 120000, 180000]
            ]
        };

        // 更新总体财务数据
        document.getElementById('sales').textContent = '¥' + financialData.totalAnalyse.sales.toLocaleString();
        document.getElementById('expenses').textContent = '¥' + financialData.totalAnalyse.expenses.toLocaleString();
        document.getElementById('debt').textContent = '¥' + financialData.totalAnalyse.debt.toLocaleString();
        document.getElementById('noReturn').textContent = '¥' + financialData.totalAnalyse.noReturn.toLocaleString();
        document.getElementById('totalBalance').textContent = '¥' + financialData.totalAnalyse.totalBalance.toLocaleString();

        // 初始化总体财务情况图表
        const summaryChart = echarts.init(document.getElementById('summaryChart'));
        const summaryOption = {
            title: {
                text: '总体财务情况'
            },
            tooltip: {},
            legend: {
                data: ['金额']
            },
            xAxis: {
                data: ['销售额', '支出', '欠款', '未回款', '账户余额']
            },
            yAxis: {},
            series: [{
                name: '金额',
                type: 'bar',
                data: [
                    financialData.totalAnalyse.sales,
                    financialData.totalAnalyse.expenses,
                    financialData.totalAnalyse.debt,
                    financialData.totalAnalyse.noReturn,
                    financialData.totalAnalyse.totalBalance
                ]
            }]
        };
        summaryChart.setOption(summaryOption);

        // 初始化月度财务趋势图表
        const monthlyChart = echarts.init(document.getElementById('monthlyChart'));
        
        // 提取月份数据
        const months = [];
        const salesData = [];
        const expensesData = [];
        const incomeData = [];
        
        for (let i = 1; i < financialData.monthData.length; i++) {
            const row = financialData.monthData[i];
            months.push(row[0]);
            salesData.push(row[1]);
            expensesData.push(row[2]);
            incomeData.push(row[3]);
        }
        
        const monthlyOption = {
            title: {
                text: '月度财务趋势'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['销售额', '支出', '收入']
            },
            xAxis: {
                type: 'category',
                data: months
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '销售额',
                    type: 'line',
                    data: salesData
                },
                {
                    name: '支出',
                    type: 'line',
                    data: expensesData
                },
                {
                    name: '收入',
                    type: 'line',
                    data: incomeData
                }
            ]
        };
        monthlyChart.setOption(monthlyOption);

        // 响应式图表
        window.addEventListener('resize', function() {
            summaryChart.resize();
            monthlyChart.resize();
        });
    </script>
</body>
</html>